<template>
    <div class="container">

        <el-table :data="newsList"
            :header-cell-style="{ background: 'rgb(30, 40, 50)', color: '#fff', border: '0px', fontSize: '18px', height: '50px' }"
            :row-style="{ background: '#0e192a', color: '#fff' }">

            <!-- 新闻标题 -->
            <el-table-column label="数据" :label="title" prop="title" sortable />

            <!-- 上传时间 -->
            <el-table-column label="时间" :label="createtime" prop="createtime" />

            <!-- 作者 -->
            <el-table-column label="作者" prop="" />

            <!-- 缩略图 -->
            <el-table-column prop="litimage" label="缩略图" width="280px">
                <el-image style="width: 100px; height: 100px" :src="litimage" />

            </el-table-column>


            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="Type to search" />
                </template>
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- {{ newsList }} -->


    </div>
    <el-footer>
        <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000" background="red" />
    </el-footer>
</template>

<script setup>
import { computed, ref } from 'vue';

import { getnewslist } from '../utils/api/newslist.js'

let newsList = ref([]);
// console.log(newsList.value)

// 引入新闻列表请求
// 有data数据 的生命周期
onBeforeMount(() => {
    getnewslist().then(res => {
        console.log(res)
        // 表格数据
        newsList.value = res;


    })

})
console.log(newsList.value)



let router = useRouter();
// 编辑函数
const handleEdit = () => {
    router.push({ path: '/detail' })
}

// 删除函数
const handleDelete = () => {
}


const search = ref('')
const filterTableData = computed(() =>
    newsList.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)




</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    /* background: red; */
    /* padding: 4%; */


}

/* 分页 */
/* /deep/ .el-pagination .el-pager li:not(.disabled) {
    background-color: rgba(28, 29, 34);
    color: #fff;
} */

.sysBox>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #FD7A3A;
    color: #fff;
}

::v-deep .msg-pagination-container.is-background .el-pager li {
    background-color: #4776a8;
    color: #4985c6;
}

/* 主题表格 */
.common-layout .el-container>.el-container .el-main .el-table {
    /* margin-top: 5%; */
}

/* 主题表格悬停效果  */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #4b5a71;
    color: #fff;
}

::v-deep .el-table--enable-row-hover .el-table__body tr {
    /* color: red; */

    height: 60px;
}



::v-deep .el-table__inner-wrapper::before {
    background-color: transparent;
}

::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    border: 0;
}

::v-deep .el-table .tbody {
    border: 0;
}

/* 左侧列表 */
.common-layout .el-container>.el-container .el-aside {
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* flex-wrap: wrap; */
    width: 240px;
    height: 100vh;
    background-color: rgba(28, 29, 34);
    position: relative;
}

.common-layout .el-container>.el-container .el-aside .logo {
    position: absolute;
    top: 0%;
    left: 20%;
    display: flex;
    align-items: center;
    /* background-color: pink; */
    height: 15%;
}

/* leftBar */
.leftBar {
    margin-top: -40px;
    width: 100%;
    height: 60%;
    /* overflow: hidden; */
    /* background-color: pink; */

}

::v-deep .el-col {
    width: 100%;

}



.common-layout {
    width: 100%;

    /* background: url('./public/images/2.webp') no-repeat; */
    background-size: cover;
}

.common-layout img {}

.common-layout .el-header {
    height: 80px;
    /* background-color: pink; */
}


/* 主题内容 */
.common-layout .el-container>.el-container {
    /* height: 100vh; */

}

/* 主题内容main */
.common-layout .el-container>.el-container .el-main {

    background: rgb(21, 21, 29);
    overflow: hidden;
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */
    /* background-color: pink; */

}



/* 主题内容背景图片 */
.backimg {
    width: 100%;
    height: 50%;
    /* background-color: pink; */
    display: flex;
    justify-content: center;
}

.backimg img {
    width: 450px;
    /* z-index: -1; */
    position: fixed;
    top: 30%;
    left: 50%;

    /* margin-top: -40px; */


}

.common-layout .el-container>.el-container .el-main h1 {
    color: #fff;
    font-size: 24px;
    /* display: none; */
}

/* Footer */
.common-layout .el-container>.el-container .el-footer {
    background-color: rgb(25, 25, 30);

}

.demo-type {
    display: flex;
}

.demo-type>div {
    flex: 1;
    text-align: center;
}

.demo-type>div:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}

.example-pagination-block+.example-pagination-block {
    margin-top: 90px;
    background-color: transparent;
}

.example-pagination-block .example-demonstration {
    margin-bottom: 16px;
    background-color: transparent;

}

.el-menu {
    background-color: #41587a;
}

.el-menu:hover .el-sub-menu {
    background-color: #000000;

}

.el-sub-menu span {
    color: #fff;

}

.el-sub-menu .el-icon {
    color: #fff;
}

/* 修改子菜单的背景色 */

.el-menu-item {
    background-color: rgba(28, 29, 34);
    color: #fff;

}

/* 鼠标悬浮时，子菜单的样式： */

.el-menu-item:hover {
    outline: 0 !important;
    color: #0075f3 !important;
}

.el-menu-item.is-active {
    color: #000000 !important;
    background: #0773d7 !important;
}

::v-deep .el-icon {
    color: #fff;

}
</style>